<template>
    <div class="Comprehensive-content">
        <div class="title">社区综合排名</div>
        <div class="content-gap">
            <!-- 表单 -->
            <div class="form-container">
                <div class="form-item">
                    <el-select v-model="selectedProjectType" placeholder="项目类型" size="default" style="width: 100px;">
                        <el-option label="住宅" value="residential"></el-option>
                        <el-option label="商业" value="commercial"></el-option>
                        <el-option label="混合" value="mixed"></el-option>
                    </el-select>
                </div>
                <div class="tab-buttons">
                    <div :class="['tab-btn', { active: activeTab === 'scale' }]" @click="activeTab = 'scale'">
                        规模
                    </div>
                    <div :class="['tab-btn', { active: activeTab === 'population' }]" @click="activeTab = 'population'">
                        人口
                    </div>
                </div>
            </div>
            <!-- 列表 -->
            <div class="table-container">
                <CustomTable :data="tableData" :columns="tableColumns" :current-page="currentPage" :page-size="pageSize"
                    :total="total" :show-pagination="true" @page-change="handlePageChange">
                    <!-- 排名列自定义内容 -->
                    <template #rank="{ row }">
                        <div class="rank-cell">
                            <div v-if="row.rank <= 3" class="medal">
                                <!-- <img :src="getMedalIcon(row.rank)" :alt="`第${row.rank}名`" /> -->
                            </div>
                            <div v-else class="rank-number">{{ String(row.rank).padStart(2, '0') }}</div>
                        </div>
                    </template>
                    <!-- 社区名列自定义内容 -->
                    <template #community="{ row }"> {{ row.community }} </template>
                    <!-- 人口数量列自定义内容 -->
                    <template #population="{ row }"> {{ row.population }}人 </template>
                    <!-- 人口密度列自定义内容 -->
                    <template #density="{ row }">{{ row.density }}人/㎡ </template>
                </CustomTable>
                <!-- 分页器 -->
                <div class="pagination-container">
                    <div class="page-dots">
                        <div v-for="(item, index) in 3" :key="index"
                            :class="['page-dot', { active: currentPage === index + 1 }]" @click="goToPage(index + 1)">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import CustomTable from '../components/CustomTable.vue';

const selectedProjectType = ref('');
const activeTab = ref('scale');

const tableData = ref([
    { rank: 1, community: '社区A', buildings: 100, area: 15000, population: 5000, density: 333 },
    { rank: 2, community: '社区B', buildings: 80, area: 12000, population: 4200, density: 350 },
    { rank: 3, community: '社区C', buildings: 70, area: 10000, population: 3800, density: 380 },
    { rank: 4, community: '社区D', buildings: 90, area: 13000, population: 4500, density: 346 },
    { rank: 5, community: '社区E', buildings: 60, area: 9000, population: 3200, density: 356 },
    { rank: 6, community: '社区F', buildings: 85, area: 11000, population: 4100, density: 373 },
    { rank: 5, community: '社区E', buildings: 60, area: 9000, population: 3200, density: 356 },
    { rank: 6, community: '社区F', buildings: 85, area: 11000, population: 4100, density: 373 }
]);

// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(tableData.value.length);

// 自动切换相关
const autoSwitchTimer = ref(null);
const autoSwitchInterval = 5000; // 5秒

// 计算总页数
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));

// 分页方法
const goToPage = (page) => {
    currentPage.value = page;
    // 点击切换回调
    handlePageChange(page);
    // 重置自动切换定时器
    resetAutoSwitch();
};

const handlePageChange = (page) => {
    currentPage.value = page;
    // 这里可以添加页面切换的回调逻辑
    console.log(`页面切换到第${page}页`);
};

// 自动切换到下一页
const autoSwitchToNext = () => {
    if (currentPage.value < 3) {
        currentPage.value++;
    } else {
        currentPage.value = 1; // 循环回到第一页
    }
    // 自动切换回调
    handleAutoSwitch(currentPage.value);
};

// 自动切换回调
const handleAutoSwitch = (page) => {
    console.log(`自动切换到第${page}页`);
    // 这里可以添加自动切换的回调逻辑
};

// 启动自动切换
const startAutoSwitch = () => {
    if (autoSwitchTimer.value) {
        clearInterval(autoSwitchTimer.value);
    }
    autoSwitchTimer.value = setInterval(() => {
        autoSwitchToNext();
    }, autoSwitchInterval);
};

// 停止自动切换
const stopAutoSwitch = () => {
    if (autoSwitchTimer.value) {
        clearInterval(autoSwitchTimer.value);
        autoSwitchTimer.value = null;
    }
};

// 重置自动切换定时器
const resetAutoSwitch = () => {
    stopAutoSwitch();
    startAutoSwitch();
};

// 表格列配置
const tableColumns = computed(() => {
    return [
        { prop: 'rank', label: '排名', width: '60px', align: 'center' },
        { prop: 'community', label: '社区', width: '90px', align: 'left' },
        { prop: 'population', label: '规划楼栋数', width: '100px', align: 'center' },
        { prop: 'density', label: '建筑面积 (㎡)', width: '100px', align: 'center' }
    ];
});

const getMedalIcon = (rank) => {
    if (rank === 1) return '/src/assets/images/medal_gold.png';
    if (rank === 2) return '/src/assets/images/medal_silver.png';
    if (rank === 3) return '/src/assets/images/medal_bronze.png';
    return '';
};

// 组件挂载时启动自动切换
onMounted(() => {
    startAutoSwitch();
});

// 组件卸载时清理定时器
onUnmounted(() => {
    stopAutoSwitch();
});
</script>

<style scoped lang="scss">
.Comprehensive-content {
    width: 100%;
    height: 45%;
    padding: 30px 0px 18px 26px;


    .content-gap {
        width: 100%;
        height: 98%;
        // background-color: #59ab11;
        margin-left: -10px;
        padding: 20px 0;
    }

    .form-container {
        display: flex;
        align-items: center;
        gap: 10px;

    }

    .form-item {
        display: flex;
        align-items: center;
        gap: 10px;

    }

    // 分页器容器样式
    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

        // 分页点样式
        .page-dots {
            display: flex;
            gap: 12px;
            align-items: center;

            .page-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #c3c6cf;
                cursor: pointer;
                transition: all 0.3s ease;

                &:hover {
                    background-color: #3581F2;
                    transform: scale(1.2);
                }

                &.active {
                    width: 24px;
                    height: 8px;
                    border-radius: 4px;
                    background: linear-gradient(90deg, #3581F2 0%, #22B2F0 100%);
                    box-shadow: 0 2px 8px rgba(53, 129, 242, 0.3);
                }
            }
        }

        // 自动切换指示器样式
        .auto-switch-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: rgba(53, 129, 242, 0.1);
            border-radius: 16px;
            border: 1px solid rgba(53, 129, 242, 0.2);

            .indicator-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #3581F2;
                animation: pulse 2s infinite;
            }

            .indicator-text {
                font-size: 12px;
                color: #3581F2;
                font-weight: 500;
            }
        }
    }

    // 脉冲动画
    @keyframes pulse {
        0% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            transform: scale(1.2);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .tab-buttons {
        display: flex;
        gap: 10px;
    }

    .tab-btn {
        width: 70px;
        height: 32px;
        padding: 0px 16px 0px 16px;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        transition: all 0.3s ease;
        background: rgba(235, 236, 237, 0);
        border-radius: 6px;
        border: 1px solid #c3c6cf;
        color: #525A66;
        font-size: 16px;
        line-height: 28px;

        &.active {
            background: linear-gradient(90deg, #3581F2 0%, #22B2F0 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(34, 178, 240, 0.3);
            border: 1px solid transparent;
        }

        &:hover {
            color: white;
            border: 1px solid #3581F2;
            background: linear-gradient(90deg, #3581F2 0%, #22B2F0 100%);

            &.active {
                background: linear-gradient(180deg, #1da1d9 0%, #2d70d9 100%);
            }
        }
    }

    .title {
        color: #141414;
        font-family: Alimama FangYuanTi VF;
        font-weight: normal;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 20px;
        color: #383C42;
        // 左边蓝色的线
        // 设置间距
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 100%;
            background-color: #1872F9;
            border-radius: 10px;
            margin-left: -10px;
            margin-top: 1px;
        }
    }

    // 入场动画关键帧
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .table-container {
        width: 100%;
        margin-top: 20px;

        // 排名列样式
        .rank-cell {
            display: flex;
            align-items: center;
            justify-content: center;

            .medal {
                width: 24px;
                height: 24px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            .rank-number {
                font-weight: 600;
                color: #525A66;
                font-size: 14px;
            }
        }

        // 社区名称样式
        .community-name {
            font-weight: 500;
            color: #383C42;
        }

        // 建筑数量样式
        .buildings-count {
            color: #3581F2;
            font-weight: 500;
        }

        // 面积值样式
        .area-value {
            color: #22B2F0;
            font-weight: 500;
        }

        // 人口数量样式
        .population-count {
            color: #FF6B6B;
            font-weight: 500;
        }

        // 人口密度样式
        .density-value {
            color: #4ECDC4;
            font-weight: 500;
        }
    }
}
</style>
